<!-- 修改密码 -->
<template>
  <div>
    <el-dialog title="修改密码" v-model="dialogVisible" width="30%" draggable @close="closeDialog">
      <div class="container">
        <el-form ref="form" :model="user" :rules="rules" label-width="120px">
          <el-form-item label="旧密码" prop="oldPassword">
            <el-input v-model="user.oldPassword" placeholder="请输入旧密码" type="password" show-password />
          </el-form-item>
          <el-form-item label="新密码" prop="newPassword">
            <el-input v-model="user.newPassword" placeholder="请输入新密码" type="password" show-password />
          </el-form-item>
          <!-- <Password v-model="user.newPassword" :strength-meter-only="true" @feedback="showFeedback" @score="showScore"
            class="passwordcore" /> -->

          <el-form-item label="再次输入密码" prop="confirmPassword">
            <el-input v-model="user.confirmPassword" placeholder="再次输入密码" type="password" show-password />
          </el-form-item>
        </el-form>
      </div>
      <template #footer>
        <span class="dialog-footer">
          <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="submitForm('form')">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import rule from '@/utils/rule.js'
import { sysLogout } from '@/api/request'
import { changePassword } from '@/api/sys/user.js'

import Password from 'vue-password-strength-meter'

export default {
  name: 'editPassword',
  components: { Password },

  data() {
    return {
      dialogVisible: false,
      user: {
        oldPassword: null,
        newPassword: null,
        confirmPassword: null,
      },
      rules: {
        oldPassword: [
          { required: true, message: '请输入旧密码', trigger: 'blur' },
          { validator: rule.checkPassword, trigger: 'blur' },
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { validator: rule.checkPassword, trigger: 'blur' },
        ],
        confirmPassword: [
          { required: true, message: '请再次输入密码', trigger: 'blur' },
          { validator: rule.checkPassword, trigger: 'blur' },
        ],
      },
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() { },
  methods: {
    // 打开弹窗
    openDialog() {
      console.log('打开');

      this.dialogVisible = true
    },
    // 关闭弹窗
    closeDialog() {
      this.dialogVisible = false
    },
    // 退出登录
    logout() {
      sysLogout()
        .then((res) => {
          if (res.data.code == 200) {
            this.$message({
              message: res.data.message,
              type: 'success',
            })
            localStorage.removeItem('path')
            localStorage.removeItem('accountId')
            localStorage.removeItem('X-Access-Token')
            this.$router.push('/')
          } else {
            this.$message.error(res.data.message)
          }
        })
        .catch((err) => {
        })
    },

    // 提交表单
    submitForm(formName) {
      if (this.user.newPassword === this.user.confirmPassword) {
        let params = {
          accountId: localStorage.getItem('accountId'),
          newLoginPwd: this.user.newPassword,
          oldLoginPwd: this.user.oldPassword,
        }

        this.$refs[formName].validate((valid) => {
          if (valid) {
            changePassword(params)
              .then((res) => {
                if (res.data.code == 200) {
                  this.$message.success('密码修改成功，请重新登录')
                  this.closeDialog()
                  this.logout()
                }
              })
              .catch((err) => {
                this.$message.error(err)

              })
              .finally(() => { })
          } else {
            return false
          }
        })
      } else {
        this.$message.error('新密码和确认密码不一致')
      }
    },
    showFeedback({ suggestions, warning }) { },
    showScore(score) { },
  },
}
</script>
<style lang="less" scoped>
.passwordcore {
  width: 70%;
}
</style>
